//这是首页的js设置
//滑入顶部导航改变样式
//========================================
$('.top-nav a').click(function() {
    $(this).addClass('active').parent().siblings().children().removeClass('active');
});



//========================================
//轮播图的渲染设置
$.each(bannerList, function(index, val) {
    $('.banner-items').append(`
        <li>
            <a href='JavaScript:;'><img src=${val.src}></a>
        </li>
    `);
});
//轮播图上的小圆点
$.each(bannerList, function() {
    $('.banner-dot').append(`
        <span></span>
    `);
});
//让轮播图开始轮播
var i = 0;
var timer;
$(function() {
    //设置第一张图片显示，其余隐藏
    $('.banner-items li').eq(0).show().siblings().hide();
    $('.banner-dot span').eq(0).addClass('banner-active').siblings('.banner-dot span').removeClass('banner-active');
    //调用showTime()函数（轮播函数）
    showTime();
    //当鼠标经过下面的数字时，触发两个事件（鼠标悬停和鼠标离开）
    $('.banner-dot span').hover(function() {
        //获取当前i的值，并显示，同时还要清除定时器
        i = $(this).index();
        Show();
        clearInterval(timer);
    }, function() {
        showTime();
    });

});
//创建一个showTime函数
function showTime() {
    //定时器
    timer = setInterval(function() {
        //调用一个Show()函数
        Show();
        i++;
        //当图片是最后一张的后面时，设置图片为第一张
        if (i == 6) i = 0;
    }, 3000);
}
//创建一个Show函数
function Show() {
    //只让选中的那个li出现
    $('.banner-items li').eq(i).fadeIn(400).siblings('.banner-items li').fadeOut(400);
    //给小圆点设置class
    $('.banner-dot span').eq(i).addClass('banner-active').siblings('.banner-dot span').removeClass('banner-active');
}



//===========================================
//轮播图下面三个盒子的倒计时
var oTime = document.getElementsByClassName('time')[0];
var oSpan = oTime.getElementsByTagName('span');
dj();
setInterval(dj, 1000);

function dj() {
    //获取现在时间
    var currenDate = new Date();
    //创建未来时间
    var futterDate = new Date('2022,04,14,23:59:59');
    var time = parseInt((futterDate - currenDate) / 1000); //时间戳：一个时间到另一个时间的毫秒数
    var t = parseInt(time / 86400); //天：t = s / 60 / 60 / 24
    var h = parseInt(time % 86400 / 3600) //h = s / 60 / 60 
    var m = parseInt(time % 86400 % 3600 / 60) // m = s / 60
    var s = time % 60;
    oSpan[0].innerHTML = fillZero(t);
    oSpan[1].innerHTML = fillZero(h);
    oSpan[2].innerHTML = fillZero(m);
    oSpan[3].innerHTML = fillZero(s);
};
//补充0
function fillZero(num) {
    return num < 10 ? "0" + num : num;
};



//=============================================
//双十一和畅想全球商品列表
//点击标题出现对应的盒子
$('.list-title p').click(function() {
    $(this).addClass('list-active').siblings().removeClass('list-active');
});
$('.list-title p:eq(0)').click(function() {
    $('.double-box').show();
    $('.total-box').hide();
});
$('.list-title p:eq(1)').click(function() {
    $('.double-box').hide();
    $('.total-box').show();
});
//双十一的渲染
$.each(doubleOne, function(index, val) {
    $('#double-one').append(`
        <li>
            <img src=${val.src}>
        </li>
    `);
});

//畅想全球的渲染
$.each(toTal, function(index, val) {
    $('#total').append(`
        <li>
            <img src=${val.src}>
        </li>
    `);
});



//===================================================
//设置点击出现对应的盒子
$('.all-title li').click(function() {
    $(this).addClass('all-active').siblings().removeClass('all-active');
});
$('.all-title li:eq(0)').click(function() {
    $('.hot').show();
    $('.fresh').hide();
    $('.entire').hide();
});
$('.all-title li:eq(1)').click(function() {
    $('.hot').hide();
    $('.fresh').show();
    $('.entire').hide();
});
$('.all-title li:eq(2)').click(function() {
    $('.hot').hide();
    $('.fresh').hide();
    $('.entire').show();
});
//热门推荐、、所有商品的渲染
$.each(hot, function(index, val) {
    $('#hot-box').append(`
        <li>
            <img src=${val.src} alt="">
            <div>
                <p>${val.title}</p>
                <h4>现价格：￥<span>${val.money}</span></h4>
                <s>原价格：￥<i>${val.del}</i></s>
                <a href="JavaScript:;">立即抢购</a>
            </div>
        </li>
    `);
});
// 上新推荐
$.each(fresh, function(index, val) {
    $('#fresh-box').append(`
        <li>
            <img src=${val.src} alt="">
            <div>
                <p>${val.title}</p>
                <h4>现价格：￥<span>${val.money}</span></h4>
                <s>原价格：￥<i>${val.del}</i></s>
                <a href="JavaScript:;">立即抢购</a>
            </div>
        </li>
    `);
});
$.each(entire, function(index, val) {
    $('#entire-box').append(`
        <li>
            <img src=${val.src} alt="">
            <div>
                <p>${val.title}</p>
                <h4>现价格：￥<span>${val.money}</span></h4>
                <s>原价格：￥<i>${val.del}</i></s>
                <a href="JavaScript:;">立即抢购</a>
            </div>
        </li>
    `);
});